import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_app/config/decoders.dart';
import 'package:flutter_app/resources/widgets/safearea_widget.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:image_picker/image_picker.dart';
import 'package:nine_grid_view/nine_grid_view.dart';
import 'package:nylo_framework/nylo_framework.dart';
import '../../bootstrap/helpers.dart';
import '../../config/constant.dart';
import '../widgets/image_widget.dart';
import '/app/controllers/deliver_controller.dart';

class DeliverPage extends NyPage<DeliverController> {
  static String path = '/deliver';

  @override
  init() async {
    // To update the state,
    // use: refreshPage(setState: () { });
  }

  @override
  Widget build(BuildContext context) {
    ScreenUtil.init(context, designSize: ScreenSize);
    return Scaffold(
      body: WillPopScope(
        onWillPop: () async {
          bool quit = await controller!.keyBack(context, refreshPage);
          return quit;
        },
        child: Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [
                ThemeColor.get(context).primaryBackgroundLight,
                ThemeColor.get(context).primaryBackgroundDeep.withOpacity(1),
              ],
            ),
          ),
          child: SafeAreaWidget(
            child: SingleChildScrollView(
              child: Container(
                child: Column(
                  children: [
                    Container(
                      margin: EdgeInsets.only(top: 40.w, bottom: 40.w),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          GestureDetector(
                            onTap: () {
                              controller!.backPop(context, refreshPage);
                            },
                            child: Container(
                              width: 84.w,
                              height: 84.w,
                              decoration: BoxDecoration(
                                border: Border.all(
                                  width: 4.w,
                                  color: ThemeColor.get(context)
                                      .fontGrey
                                      .withOpacity(.05),
                                ),
                                borderRadius:
                                    BorderRadius.circular(50.sp), // 圆角半径
                              ),
                              child: Icon(
                                Icons.arrow_back_outlined,
                                color: ThemeColor.get(context).background,
                              ),
                            ),
                          ),
                          GestureDetector(
                            onTap: () =>
                                controller!.publicContent(context, refreshPage),
                            child: Container(
                              width: 130.w,
                              height: 70.w,
                              alignment: Alignment.center,
                              decoration: BoxDecoration(
                                color: ThemeColor.get(context)
                                    .primaryBackgroundDeep
                                    .withOpacity(1),
                                borderRadius:
                                    BorderRadius.circular(50.sp), // 圆角半径
                              ),
                              child: Text(
                                "发布",
                                style: TextStyle(
                                    color: ThemeColor.get(context).background),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    Container(
                      alignment: Alignment.centerLeft,
                      child: Text(
                        "0.01元发布一条,首单免费",
                        style:
                            TextStyle(color: Colors.white70, fontSize: 26.sp),
                      ),
                    ),
                    TextField(
                      controller: controller!.content,
                      keyboardType: TextInputType.multiline,
                      maxLines: 8,
                      maxLength: 500,
                      decoration: InputDecoration(
                        border: OutlineInputBorder(
                          borderSide: BorderSide(
                              color: ThemeColor.get(context)
                                  .primaryBackgroundLight,
                              width: 1.0),
                          borderRadius: BorderRadius.circular(8.0),
                        ),
                        enabledBorder: OutlineInputBorder(
                          borderSide: BorderSide(
                              color: ThemeColor.get(context)
                                  .primaryBackgroundLight,
                              width: 1.0),
                          borderRadius: BorderRadius.circular(8.0),
                        ),
                        focusedBorder: OutlineInputBorder(
                          borderSide: BorderSide(
                              color:
                                  ThemeColor.get(context).primaryBackgroundDeep,
                              width: 2.0),
                          borderRadius: BorderRadius.circular(8.0),
                        ),
                        hintText: '您的交友简介(介绍自己对另一半的期待)',
                        hintStyle: TextStyle(
                            color: ThemeColor.get(context).fontGrey,
                            fontSize: 30.sp),
                        contentPadding: EdgeInsets.symmetric(
                            vertical: 16.0, horizontal: 16.0),
                      ),
                      style: TextStyle(
                          color: ThemeColor.get(context).background,
                          fontSize: 30.sp),
                      cursorColor: ThemeColor.get(context).background,
                    ),

                    SizedBox(
                      height: 10.w,
                    ),
                    // 微信号
                    Container(
                      width: 600.w,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: [
                          Text(
                            "微信号:",
                            style: TextStyle(
                                color: ThemeColor.get(context).background,
                                fontSize: 30.sp),
                          ),
                          Container(
                            width: 480.w,
                            height: 70.w,
                            decoration: BoxDecoration(
                              border: Border(
                                bottom: BorderSide(
                                  color: ThemeColor.get(context).background,
                                  width: 4.w,
                                ),
                              ),
                            ),
                            child: TextField(
                              keyboardType: TextInputType.number,
                              controller: controller!.wxNumber,
                              cursorColor: ThemeColor.get(context).background,
                              cursorHeight: 50.w,
                              style: TextStyle(
                                color: ThemeColor.get(context).background,
                              ),
                              decoration: InputDecoration(
                                border: OutlineInputBorder(
                                  borderSide: BorderSide.none,
                                  borderRadius: BorderRadius.circular(8.0),
                                ),
                                focusedBorder: OutlineInputBorder(
                                  borderSide: BorderSide(
                                      color: Colors.transparent, width: 1.0),
                                  borderRadius: BorderRadius.circular(8.0),
                                ),
                                counterText: '',
                                contentPadding:
                                    EdgeInsets.symmetric(horizontal: 20.w),
                                filled: true,
                                fillColor: Colors.transparent,
                                hintText: '请输入微信号',
                                hintStyle: TextStyle(
                                  color: ThemeColor.get(context).fontGrey,
                                  fontSize: 30.sp,
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    SizedBox(
                      height: 10.w,
                    ),
                    // qq号
                    Container(
                      width: 600.w,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: [
                          Text(
                            "QQ号:",
                            style: TextStyle(
                                color: ThemeColor.get(context).background,
                                fontSize: 30.sp),
                          ),
                          Container(
                            width: 480.w,
                            height: 70.w,
                            decoration: BoxDecoration(
                              border: Border(
                                bottom: BorderSide(
                                  color: ThemeColor.get(context).background,
                                  width: 4.w,
                                ),
                              ),
                            ),
                            child: TextField(
                              keyboardType: TextInputType.number,
                              controller: controller!.qqNumber,
                              cursorColor: ThemeColor.get(context).background,
                              cursorHeight: 50.w,
                              style: TextStyle(
                                color: ThemeColor.get(context).background,
                              ),
                              decoration: InputDecoration(
                                border: OutlineInputBorder(
                                  borderSide: BorderSide.none,
                                  borderRadius: BorderRadius.circular(8.0),
                                ),
                                focusedBorder: OutlineInputBorder(
                                  borderSide: BorderSide(
                                      color: Colors.transparent, width: 1.0),
                                  borderRadius: BorderRadius.circular(8.0),
                                ),
                                counterText: '',
                                contentPadding:
                                    EdgeInsets.symmetric(horizontal: 20.w),
                                filled: true,
                                fillColor: Colors.transparent,
                                hintText: '请输入QQ号',
                                hintStyle: TextStyle(
                                  color: ThemeColor.get(context).fontGrey,
                                  fontSize: 30.sp,
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    SizedBox(
                      height: 40.w,
                    ),
                    Container(
                      alignment: Alignment.centerLeft,
                      child: Text(
                        "上传",
                        style: TextStyle(
                            color: ThemeColor.get(context).background,
                            fontSize: 35.sp),
                      ),
                    ),
                    SizedBox(
                      height: 30.w,
                    ),
                    // 展示相册
                    NineGridView(
                      width: MediaQuery.of(context).size.width - 32,
                      padding: EdgeInsets.all(4.0),
                      itemCount: controller!.imageList.length < 9
                          ? controller!.imageList.length + 1
                          : 9,
                      type: NineGridType.weChat,
                      itemBuilder: (BuildContext context, int index) {
                        // 添加图片按钮
                        if (index == controller!.imageList.length) {
                          return GestureDetector(
                            onTap: () => controller!
                                .showImagePickerDialog(context, refreshPage),
                            child: Container(
                              color: ThemeColor.get(context)
                                  .primaryContent
                                  .withOpacity(0.3),
                              child: Icon(
                                Icons.add,
                                size: 80.sp,
                                color: ThemeColor.get(context).background,
                              ),
                            ),
                          );
                        } else {
                          return Stack(
                            children: [
                              ImageWidget(
                                imageUrl: controller!.imageList[index],
                                width: double.infinity,
                                height: double.infinity,
                              ),
                              Positioned(
                                top: 8,
                                right: 8,
                                child: GestureDetector(
                                  onTap: () => controller!
                                      .removeImage(index, refreshPage),
                                  child: Container(
                                    decoration: BoxDecoration(
                                        borderRadius:
                                            BorderRadius.circular(100.w),
                                        color: ThemeColor.get(context)
                                            .primaryContent
                                            .withOpacity(0.2)),
                                    width: 40.w,
                                    height: 40.w,
                                    child: Icon(
                                      Icons.clear,
                                      color: ThemeColor.get(context).background,
                                      size: 28.sp,
                                    ),
                                  ),
                                ),
                              ),
                            ],
                          );
                        }
                      },
                    ),
                    //

                    SizedBox(
                      height: 30.w,
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}
